<script setup lang="ts">
import { computed } from 'vue';

const emit = defineEmits(['gameClick'])

const props = defineProps<{
    game: any
}>()

const enum Status {
    unComplete = 0, // 未完成所有任务
    unReceive = 1, // 完成任务未领取圣杯
    isComplete = 2 // 完成任务且已领取圣杯
}
const gameTaskStatus = computed(() => {
    if (props.game.taskStepTotal === props.game.taskFinalSize) {
        return props.game.isGetGrail ? Status.isComplete : Status.unReceive
    }
    return Status.unComplete
})

const btnStatusText = computed(() => {
    const btnTextMap = [300, 'Claim', 'Go']
    return btnTextMap[gameTaskStatus.value]
})

</script>

<template>
    
    <div class="container" @click="emit('gameClick', [gameTaskStatus, props.game.gameId])">
        <div class="container-logo">
            <img :src="props.game.gameLogo" :alt="props.game.gameName">
        </div>
        <span class="container-name van-ellipsis">{{ props.game.gameName }}</span>
        <p class="container-desc van-multi-ellipsis--l2">{{ props.game.gameDesc }}</p>
        <div class="container-btn">
            <div class="container-btn-content">
                <img v-if="gameTaskStatus === Status.unComplete" src="@/assets/imgs/flame.png" alt="flame" width="50">
                <span>{{ btnStatusText }}</span>
            </div>
        </div>
    </div>

</template>

<style scoped lang="scss">
.container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 24vmin;
    background: linear-gradient(180deg, #4F2194 0%, #6135A2 100%);
    border-radius: 3vmin;

    &-logo {
        position: absolute;
        top: 50%;
        left: 2vmin;
        transform: translateY(-50%);
        width: 20vmin;
        height: 20vmin;
        border-radius: 3vmin;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
        }
    }

    &-name {
        display: block;
        width: 50%;
        color: #ffffff;
        font-size: var(--small-font-size);
        font-weight: bold;
        padding-right: 5vmin;
        padding-left: 2vmin;
    }

    &-desc {
        width: 50%;
        font-size: 12px;
        color: #ffffff;
        margin-bottom: 0;
        padding-right: 5vmin;
        padding-left: 2vmin;
        margin-top: 1.5vmin;
        color: var(--gamecenter-item-desc-color);
        line-height: 1.45;
    }

    &-btn {
        position: absolute;
        top: 50%;
        right: 2vmin;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 23vmin;
        height: 8vmin;
        background-color: var(--gamecenter-item-btn-bg-color);
        border-radius: 9999px;

        &-content {
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 3.5vmin;
                filter: var(--trophy-box-shadow);
                margin-right: 2vmin;
            }

            span {
                font-size: var(--mini-font-size);
                font-weight: bold;
                color: #ffffff;
            }
        }
    }
}
</style>